<template>
  <layout>
    <div class="family">
      <div class="top-bar">
        <div class="btn btn-back" @click="$router.back()">返回</div>
        <div class="right-btn-group">
          <div class="btn btn-submit">提交</div>
        </div>
      </div>
      <div class="content">
        <div class="title">2021民主推荐采集</div>
        <div class="notice-row" @click="isInstructionShow = true">
          <div class="notice">
            <van-icon name="warning" />
            <div class="text">操作说明</div>
            <van-icon name="play" />
          </div>
        </div>
        <div class="status-bar">
          <van-icon name="friends" />
          <div>已添加<span>{{family.length}}</span>人</div>
        </div>
        <div class="person-info-list">
          <div class="person-info-wrapper"
            v-for="(person,i) of family"
            :key="i"
            @click="showMenu(person)"
          >
            <div class="person-name">{{person.title}}-{{person.name}}</div>
            <div class="person-info">
              {{person.gender}}，
              {{getAge(person.birthday)}}岁，
              {{person.politics}}，
              {{person.organization}}
            </div>
            <div
              :class="['person-menu', {
                activate: person.isMenuShow
              }]"
            >
              <div class="delete" @click.stop="removePerson(person,i)"><van-icon name="delete" /></div>
              <div class="edit" @click.stop="editPerson(person,i)"><van-icon name="edit" /></div>
            </div>
          </div>
        </div>

        <div class="create-form">
          <div class="form-header">{{isEditMode?'修改':'新增'}}</div>
          <div class="form-content">
            <div class="form-item with-arrow">
              <div>称谓：</div>
              <div
                :class="{empty: !form.title}"
                @click="isTitlePickShow=true"
              >{{form.title || '请选择'}}</div>
            </div>
            <div class="form-item">
              <div>姓名：</div>
              <div>
                <van-field v-model="form.name" placeholder="请输入姓名" />
              </div>
            </div>
            <div class="form-item with-arrow">
              <div>性别：</div>
              <div
                :class="{empty: !form.gender}"
                @click="isGenderPickShow=true"
              >{{form.gender || '请选择'}}</div>
            </div>
            <div class="form-item with-arrow">
              <div>出生日期：</div>
              <div
                :class="{empty: !form.birthday}"
                @click="isBirthdayPickShow=true"
              >{{form.birthday || '请选择' | dateFormatter}}</div>
            </div>
            <div class="form-item with-arrow">
              <div>政治面貌：</div>
              <div
                :class="{empty: !form.politics}"
                @click="isPoliticsPickShow=true"
              >{{form.politics || '请选择'}}</div>
            </div>
            <div class="form-row">
              <div>工作单位及职务：</div>
              <div>
                <input type="text" v-model="form.organization">
              </div>
            </div>
          </div>
          <div class="form-footer">
            <div class="btn" @click="saveMember">保存</div>
            <div class="btn">取消</div>
          </div>
        </div>
        <div class="btn-submit">提交</div>
      </div>
      <van-popup v-model="isInstructionShow" round closeable class="notice-popup">
        <div class="notice-content-wrapper">
          <div class="title">操作说明</div>
          <div class="content">
            操作说明操作说明操作说明操作说明操作说明
          </div>
        </div>
      </van-popup>

      <van-popup position="bottom" class="slide-popup" v-model="isTitlePickShow">
        <van-picker
          title="选择称谓"
          show-toolbar
          :columns="titles"
          value-key="text"
          @confirm="titleSelected"
          @cancel="form.title = null;isTitlePickShow = false"
        >
          <template #option="item">
            <p>{{ item.text }}</p>
          </template>
        </van-picker>
      </van-popup>

      <van-popup position="bottom" class="slide-popup" v-model="isGenderPickShow">
        <van-picker
          title="选择性别"
          show-toolbar
          :columns="genders"
          value-key="text"
          @confirm="genderSelected"
          @cancel="form.gender = '';isGenderPickShow = false"
        >
          <template #option="item">
            <p>{{ item.text }}</p>
          </template>
        </van-picker>
      </van-popup>

      <van-popup position="bottom" class="slide-popup" v-model="isBirthdayPickShow">
        <van-datetime-picker
          v-model="form.birthday"
          type="date"
          title="选择出生日期"
          @confirm="isBirthdayPickShow=false"
          @cancel="form.birthday = '';isBirthdayPickShow=false"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>

      <van-popup position="bottom" class="slide-popup" v-model="isPoliticsPickShow">
        <van-picker
          title="选择政治面貌"
          show-toolbar
          :columns="politics"
          value-key="text"
          @confirm="politicsSelected"
          @cancel="form.politics = '';isPoliticsPickShow = false"
        >
          <template #option="item">
            <p>{{ item.text }}</p>
          </template>
        </van-picker>
      </van-popup>

    </div>
  </layout>
</template>

<script>
import moment from 'moment';
export default {
  filters: {
    dateFormatter(v) {
      if (typeof v !== 'object') {
        return v;
      } else {
        return moment(v).format('YYYY/MM/DD');
      }
    }
  },
  data() {
    return {
      isInstructionShow: false,
      isTitlePickShow: false,
      isGenderPickShow: false,
      isBirthdayPickShow: false,
      isPoliticsPickShow: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      titles: [
        {id: 1, text: '父亲'},
        {id: 2, text: '母亲'},
        {id: 3, text: '妻子'},
        {id: 4, text: '丈夫'},
        {id: 5, text: '儿子'}
      ],
      genders: [
        {id: 1, text: '男'},
        {id: 2, text: '女'}
      ],
      politics: [
        {id: 1, text: '党员'},
        {id: 2, text: '群众'}
      ],
      isEditMode: false,
      editIndex: -1,
      family: [{
        title: '儿子',
        titleId: 5,
        name: '张国强',
        gender: '男',
        genderId: 1,
        birthday: '2001-01-01',
        politics: '党员',
        politicsId: '1',
        organization: '财政局科员',
        isMenuShow: false
      }],
      form: {
        title: '',
        titleId: '',
        name: '',
        gender: '',
        genderId: '',
        birthday: '',
        politics: '',
        politicsId: '',
        organization: '',
        isMenuShow: false
      }
    };
  },
  methods: {
    titleSelected(e) {
      this.form.title = e.text;
      this.form.titleId = e.id;
      this.isTitlePickShow = false;
    },
    genderSelected(e) {
      this.form.gender = e.text;
      this.form.genderId = e.id;
      this.isGenderPickShow = false;
    },
    politicsSelected(e) {
      this.form.politics = e.text;
      this.form.politicsId = e.id;
      this.isPoliticsPickShow = false;
    },
    getAge(date) {
      return moment().diff(date, 'years');
    },
    showMenu(person) {
      person.isMenuShow = !person.isMenuShow;
      this.family.filter(o => o !== person).forEach(o => {
        o.isMenuShow = false;
      });
    },
    removePerson(person, i) {
      this.$dialog.confirm({
        message: '确定要删除该成员吗？'
      }).then(() => {
        this.family.splice(i, 1);
        this.$toast('删除成功');
      }, () => {});
    },
    editPerson(person, i) {
      this.form = {
        ...person
      };
      this.isEditMode = true;
      this.editIndex = i;
      person.isMenuShow = false;
    },
    saveMember() {
      const checkObj = {
        title: '称谓',
        name: '姓名',
        gender: '性别',
        birthday: '出生日期',
        politics: '政治面貌',
        organization: '工作单位及职务'
      };
      if (!Object.entries(checkObj).some(([key, text]) => {
        if (!this.form[key]) {
          this.$toast(`请填写${text}`);
          return true;
        }
      })) {
        if (this.isEditMode) {
          this.family[this.editIndex] = {
            ...this.form,
            isMenuShow: false
          };
          this.editIndex = -1;
          this.isEditMode = false;
          this.$toast('修改成功');
        } else {
          this.family.push({
            ...this.form
          });
          this.$toast('添加成功');
        }
        this.form = {
          title: '',
          titleId: '',
          name: '',
          gender: '',
          genderId: '',
          birthday: '',
          politics: '',
          politicsId: '',
          organization: '',
          isMenuShow: false
        };
      }
    }
  }
};
</script>

<style lang="less" scoped>
.family{
  display: flex;
  flex-direction: column;
  height: 100%;
  .top-bar{
    display: flex;
    padding: 28px 40px;
    height: 104px;
    box-sizing: border-box;
    .btn{
      height: 50px;
      line-height: 50px;
      background: #009AFD;
      color: #fff;
      font-size: 30px;
      text-align: center;
      padding: 0 20px;
      border-radius: 12px;
    }
    .right-btn-group{
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .btn-submit{
        margin-left: 20px;
      }
    }
  }
  >.content{
    flex: 1;
    overflow-y: auto;
    font-size: 32px;
    padding: 0 40px 40px 40px;
    .title{
      font-size: 36px;
      font-weight: 600;
      text-align: center;
    }
    .notice-row{
      display: flex;
      .notice{
        flex: 1;
        display: flex;
        align-items: center;
        padding: 10px 0 15px;
        border-bottom: 1px solid #ccc;
        color: #FE9B00;
        .text{
          margin: 0 10px;
        }
        .text+*{
          transform: rotate(90deg);
        }
      }
    }
    .status-bar{
      display: flex;
      height: 70px;
      align-items: flex-end;
      font-size: 32px;
      font-weight: 600;
      /deep/.van-icon{
        color: #137FC6;
        font-size: 40px;
        margin-right: 10px;
      }
      span{
        color: #1EA2F5;
        padding: 0 10px;
      }
    }
    .person-info-list{
      margin-top: 30px;
      .person-info-wrapper{
        position: relative;
        &:not(:first-child) {
          margin-top: 30px;
        }
        border-radius: 6px;
        box-shadow: 1px 2px 10px 3px rgba(0,0,0,.1);
        padding: 30px;
        border-left: 6px solid #009BFE;
        background: #fff;
        .person-name{
          font-weight: 600;
        }
        .person-info{
          margin-top: 16px;
          font-size: 26px;
          color: #989898;
        }
      }
      .person-menu{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: -6px;
        bottom: 0;
        right: 0;
        border-radius: 6px;
        background: rgba(0,0,0,.6);
        opacity: 0;
        pointer-events: none;
        z-index: 99;
        transition: opacity .3s ease-in-out;
        &.activate{
          pointer-events: unset;
          opacity: 1;
        }
        color: #fff;
        font-size: 60px;
        .delete{
          padding: 40px 20px 20px 20px;
        }
        .edit{
          margin-left: 80px;
          padding: 40px 20px 20px 20px;
        }
      }
    }
    .create-form{
      margin-top: 30px;
      border-radius: 8px;
      font-size: 32px;
      overflow: hidden;
      background: #fff;
      box-shadow: 1px 2px 10px 3px rgba(0,0,0,.1);
      .form-header{
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #fff;
        background: #009AFF;
      }
      .form-content{
        padding: 30px 40px 0 40px;
        .form-item{
          display: flex;
          position: relative;
          align-items: center;
          height: 80px;
          &.with-arrow::after{
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            content: '\F00A';
            color: #ccc;
            font-family: 'vant-icon';
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
          }
          >div{
            &:first-child{
              min-width: 8em;
              color: #6C5761;
              font-weight: 600;
            }
            &:last-child{
              flex: 1;
              text-align: right;
              padding-right: 20px;
              color: #6C5761;
              &.empty{
                color: #ccc;
              }
              /deep/.van-cell{
                padding: 0;
                font-size: 32px;
                input{
                  text-align: right;
                  color: #6C5761;
                  &::-webkit-input-placeholder{
                    color: #ccc;
                  }
                }
              }
            }
          }
        }
        .form-row{
          padding: 16px 0;
          >div{
            font-size: 32px;
            color: #6C5761;
            font-weight: 600;
            input{
              width: 100%;
              height: 60px;
              box-sizing: border-box;
              padding: 0 20px;
              line-height: 60px;
              margin-top: 20px;
              border-radius: 6px;;
              border: 1px solid #ccc;
              &::-webkit-input-placeholder{
                color: #ccc;
              }
            }
          }
        }
      }
      .form-footer{
        height: 80px;
        padding-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn{
          &:last-child{
            margin-left: 30px;
          }
          padding: 4px 22px;
          background: #0499FB;
          color: #fff;
          border-radius: 14px;
        }
      }
    }
    .btn-submit{
      height: 80px;
      line-height: 80px;
      color: #fff;
      background: #009AFF;
      text-align: center;
      border-radius: 12px;
      margin-top: 40px;
      font-size: 36px;
      font-weight: 500;
    }
  }
  /deep/.van-popup.slide-popup{
    .van-picker__toolbar {
      height: 80px;
      line-height: 80px;
      padding: 10px 20px;
      .van-picker__cancel,
      .van-picker__title,
      .van-picker__confirm {
        font-size: 32px;
      }
      .van-picker__title {
        line-height: 80px;
      }
    }
    .van-picker-column__item {
      font-size: 32px;
      .van-ellipsis {
        font-size: 32px;
      }
    }
  }
  /deep/.van-popup{
    .van-popup__close-icon{
      font-size: 30px;
    }
  }

  /deep/.van-popup.notice-popup{
    width: 700px;
    box-sizing: border-box;
    padding: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .notice-content-wrapper{
      font-size: 30px;
      .title{
        text-align: center;
        color: red;
      }
      .content{
        margin-top: 20px;
        line-height: 1.8;
        color: #355A73;
      }
    }
  }
}
</style>
